<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=yes" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>购物车</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="../common/css/swiper.min.css" />
		<link rel="stylesheet" href="../doctor/css/doctor.css" />
		<link rel="stylesheet" href="./css/sku.css" />
		<!-- <link rel="stylesheet" href="./css/index.css" /> -->
		<style type="text/css">
			#app {
				height: 100%;
			}
			.container {
				padding: 0 0.32rem;
				height: calc(100% + 1.38rem);
			}
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 1.04rem;
			}
			.topright {
				display: flex;
				align-items: center;
			}
			.topright img {
				width: 0.48rem;
				height: 0.48rem;
			}
			.card {
				display: flex;
				width: 6.38rem;
				margin-bottom: 0.24rem;
				height: 2.24rem;
				background: #ffffff;
				padding: 0 0.24rem;
				box-shadow: 0rem 0.06rem 0.26rem 0.02rem rgba(0, 0, 0, 0.1);
				border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
				align-items: center;
			}
			.card_content {
				display: flex;
				position: relative;
				height: 1.76rem;
				width: 5.82rem;
			}
			.card_content img {
				width: 1.76rem;
				height: 1.76rem;
				margin-right: 0.16rem;
				border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
			}
			.bottom {
				position: fixed;
				width: calc(100% - 0.64rem);
				bottom: 0;
				height: 1.06rem;
				background-color: #f7f7f7;
				display: flex;
				padding: 0 0.32rem;
				align-items: center;
			}
			.btn {
				position: fixed;
				right: 0.32rem;
				bottom: 0.1rem;
				width: 2.24rem;
				height: 0.84rem;
				background: #01cd9c;
				color: #ffffff;
				border-radius: 0.42rem 0.42rem 0.42rem 0.42rem;
			}
			.delete {
				position: absolute;
				right: 0;
				bottom: 0.64rem;
				width: 0.48rem !important;
				height: 0.48rem !important;
			}
			.deleteBtn {
				background-color: #f7f7f7;
				color: #333333;
				border: 1px solid #01cd9c;
			}
			.empty {
				width: 6.86rem;
				height: 6.86rem;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="container">
				<div class="top">
					<span style="font-size: 0.34rem; color: #333333">商品列表</span>
					<div class="topright" v-if="!isEdit" @click="toEdit">
						<img src="./img/icon/gouwuche-bianji.png" />
						<span style="font-size: 0.28rem">编辑</span>
					</div>
					<div class="topright" v-else @click="toEdit">
						<img src="./img/icon/gowuche-wancheng.png" />
						<span style="font-size: 0.28rem">完成</span>
					</div>
				</div>
				<div class="middle">
					<template v-if="list.length>0">
						<div class="card" v-for="(item,index) in list">
							<van-checkbox
								style="margin-right: 0.16rem"
								v-model="item.selected"
								checked-color="#01cd9c"
							></van-checkbox>
							<div class="card_content" @click="handleCheck(index)">
								<img :src="item.product_thumb" />
								<div
									style="
										display: flex;
										flex-direction: column;
										justify-content: space-between;
										width: 3.9rem;
									"
								>
									<p
										style="
											font-size: 0.32rem;
											color: #333333;
											min-height: 0.9rem;
											text-overflow: ellipsis;
										"
									>
										{{item.product_name}}
									</p>
									<div
										style="
											display: flex;
											justify-content: space-between;
											align-items: center;
										"
									>
										<span style="font-size: 0.36rem; color: #e22e30"
											>￥{{item.product_price}}</span
										>
										<template v-if="!isEdit">
											<span
												v-if="item.product_category==3"
												style="font-size: 0.28rem; color: #999999"
												>X1</span
											>
											<div v-else @click.stop="()=>{}">
												<van-stepper min="1" v-model="item.num" />
											</div>
										</template>
										<template v-else>
											<img
												@click.stop="handleRemove(item)"
												class="delete"
												src="./img/icon/gouwuche-shanchu.png"
											/>
										</template>
									</div>
								</div>
							</div>
						</div>
					</template>
					<template v-else>
						<img class="empty" src="./img/icon/gouwuche-kong.png" />
						<p style="text-align: center; font-size: 0.32rem">
							购物车空空如也～
						</p>
					</template>
				</div>
			</div>
			<div class="bottom">
				<div style="display: flex; align-items: center; margin-right: 1.04rem">
					<van-checkbox
						style="margin-right: 0.08rem"
						v-model="isAll"
						checked-color="#01cd9c"
					></van-checkbox>
					<span>全选</span>
				</div>
				<div style="display: flex; align-items: center" v-if="!isEdit">
					<span style="font-size: 0.28rem; color: #333333">合计：</span>
					<span style="font-size: 0.4rem; color: #e22e30">￥{{total}}</span>
				</div>
			</div>
			<van-button v-if="!isEdit" class="btn" @click="handleClick"
				>结算</van-button
			>
			<van-button v-else class="btn deleteBtn" @click="handleDelete"
				>删除</van-button
			>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<script src="./js/adjust.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js?time=202209061413"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script src="../common/js/swiper.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
			getNow,
		} from '../common/js/api/vue3-axios-utils.js'

		import { sku } from './mine.js'

		const PatientData = {
			data() {
				return {
					images: [],
					detail: {},
					list: [],
					price: {},
					isAll: false,
					value: 1,
					show: false,
					isEdit: false,
					pid: '',
				}
			},
			computed: {
				total() {
					const list = this.list
						.filter(v => {
							return v.selected
						})
						.map(n => {
							return Number(n.product_price) * Number(n.num)
						})
					const total =
						list.length > 0 &&
						list.reduce((v, i) => {
							return Number(v) + Number(i)
						})
					return total || 0
				},
			},
			watch: {
				isAll(n) {
					this.list.forEach(v => {
						v.selected = n
					})
				},
			},
			created() {
				this.pid = url('?pid')
				this.getCarList()
			},
			methods: {
				getCarList() {
					getAction(spliceUrl('/shop/cart/list'), {
						patient_id: this.pid,
					}).then(res => {
						res = res.data
						if (res.success) {
							this.list = res.data.map(v => {
								return {
									...v,
									selected: false,
								}
							})
						}
					})
				},
				handleRemove(i) {
					postAction(spliceUrl('/shop/cart/delete'), {
						cart_id: i.data_id,
					}).then(res => {
						res = res.data
						if (res.success) {
							this.$toast.success({
								message: '删除成功',
							})
							this.getCarList()
						} else {
							this.$toast.fail({
								message: res.message,
							})
						}
					})
				},
				toEdit() {
					this.isEdit = !this.isEdit
				},
				handleCheck(i) {
					this.list[i].selected = !this.list[i].selected
				},
				handleDelete() {
					if (this.list.length == 0) {
						return
					}
					const products = this.list
						.filter(v => {
							return v.selected
						})
						.map(v => {
							return v.data_id
						})
					postAction(spliceUrl('/shop/cart/delete'), {
						cart_id: products.join(','),
					}).then(res => {
						res = res.data
						if (res.success) {
							this.$toast.success({
								message: '删除成功',
							})
							this.getCarList()
						} else {
							this.$toast.fail({
								message: res.message,
							})
						}
					})
				},
				handleClick() {
					if (this.list.length == 0) {
						return
					}
					const products = this.list
						.filter(v => {
							return v.selected
						})
						.map(v => {
							return {
								id: v.product_id,
								num: v.num,
							}
						})
					sessionStorage.setItem('products', JSON.stringify(products))
					sessionStorage.setItem(
						'usePrice',
						JSON.stringify('productFormatPrice')
					)
					window.location.href = './confirm.html?pid=' + this.pid
				},
			},
			components: {
				sku,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
